年中才剛攻破 JavaScript 30 挑戰一天一題 JavaScript，過不久因緣際會接了一個專案需要使用框架開發，直接迫使我從 Vanilla.js 新手村晉升到 Vue.js 生態系統，頓時擴展新視野！由於當時是在開發時程有限的情況下立即做中查、做中學，所以初期也曾歷經都已經使用框架了，卻還是不小心蹦出用 querySelector 取得元素節點的原生招數，經過一番寒徹骨，也因而漸漸感受到原生 JavaScript 和 Vue.js 兩者之間的差異。

本系列文章主要透過使用 Vue 2 分享新手視角在執行專案過程中，復刻或模擬遇到各種需求時的解題心路歷程，因此本系列可能不會是連貫式的內容，而是偏向跳躍式的進展節奏，隨著當下所遇情境和待解項目，以兵來將擋之姿使用相應語法或外掛工具完成功能。若有出現生澀用法也請多包涵，也可以留言給予建議讓我能更上一層樓！

資料驅動

事件驅動的原生 JavaScript 利用操作 DOM 來取得節點資料，並在節點上註冊事件後監聽其變化，透過觸發事件執行監聽函式後更新 DOM，以至於畫面上也隨之更新；基於資料驅動的 Vue.js 則是綁定資料與畫面的狀態，更新資料才會更新畫面，而更新畫面就會更新資料。

官網中提到雖然 Vue 本身並非完全遵照 MVVM（Model–view–viewmodel）架構模式，但我們仍可借用此架構來幫助理解。model 代表存放的資料，view 代表顯示的畫面，viewmodel 則作為連結 view 與 model 之間的橋樑，讓 model 與 view 進行雙向綁定進而達到自動同步兩者狀態；另外在 Vue 文件中不時會出現以變數 vm 代表 Vue instance，而 vm 正是 viewmodel 的縮寫。

（圖片來源：Vue.js - Concepts Overview）

元件管理

開發中型專案時，常會發現網站中出現不少相同或相似的版面樣式、邏輯判斷等內容，此時使用 Vue.js 便能訓練一下拆解架構與整合管理的技能。

善用元件可以解決相同或相似內容不斷被重複使用的情況，減少重複的程式碼一直出現在專案的各個角落，不僅能省去複製貼上的時間，也能因為集中成元件而便於日後管理與維護。因應不同需求或複用的程度，也使得元件涵蓋的內容量可大可小，過大的元件也能再繼續拆分，因此元件也可以使用巢狀架構來組成。經過仔細的規劃，將各個元件組裝出整個網頁，網站整體就能產生具有組織化的架構。

（圖片來源：Vue.js - Composing with Components）

除此之外，還有一群 Vue 的家族成員，在你需要的時候幫助你、支援你，滿足你特定的需求，然後每個成員都有準備一本要念的經給你讀，所以學習過程中充斥著各種文件看不完也得看起來的心境！當然，更多的是使用框架實作後的體會，就讓之後一天一天慢慢發覺 Vue.js 究竟有什麼意思吧！

參考資料

• Vue.js - Introduction